<script type="text/javascript" src="__PUBLIC__/js/jscolor/jscolor.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/formValidator-4.0.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/js/formValidatorRegex.js" charset="UTF-8"></script>
<script type="text/javascript" language="javascript" src="__PUBLIC__/js/DateTimeMask.js" charset="UTF-8"></script>
<form class="form-horizontal" action="{:U('setting/fieldadd')}" method="post" name="form1" id="form1">	
	<input type="hidden" name="model" value="{$model}"/>
	<table class="table">
		<tr> 
			<th colspan="2"><span class="icon-th-list">&nbsp; {:L('FIELDS_INFORMATION')}</span></th>
		</tr>
		<tr>
			<td width="30%" class="tdleft">{:L('FIELDS_TYPE')}</td>
			<td>
				<select name="form_type" id="form_type" onchange="changeContent()">
					<option value="text">{:L('SINGLE_LINE_TEXT')}</option>
					<option value="textarea">{:L('MULTILINE_TEXT')}</option>
					<option value="editor">{:L('THE_EDITOR')}</option>	
					<option value="box">{:L('SELECTED')}</option>	
					<option value="datetime">{:L('DATE')}</option>	
					<option value="number">{:L('NUMBER')}</option>
					<option value="floatnumber">{:L('DECIMALS')}</option>
					<option value="mobile">{:L('PHONE')}</option>
					<option value="phone">{:L('TELEPHONE')}</option>
					<option value="email">{:L('EMAIL')}</option>
					<option value="address">{:L('ADDRESS')}</option>
				</select>
			</td>
		</tr>
		<tr id="info_type_td">
			<td width="30%" class="tdleft">{:L('INFORMATION_TYPE')}</td>
			<td>
				<input type="radio" name="is_main" value="1" />{:L('MAIN_INFORMATION_SEARCH')}</br>
				<input type="radio" name="is_main" value="0" checked="checked" />{:L('ADDITIONAL_INFORMATION_REDUCE')}
			</td>
		</tr>
		<tr id="box_type_td" style="display:none;">
			<td width="30%" class="tdleft" >{:L('OPTION_TYPE')}</td>
			<td>
				<input type="radio" name="setting[boxtype]" value="radio" checked="checked"/>{:L('RADIO')}
				<input type="radio" name="setting[boxtype]" value="checkbox"/>{:L('MULTISELECT')}
				<input type="radio" name="setting[boxtype]" value="select"/>{:L('COMBOBOX')}
			</td>
		</tr>
		<tr id="box_data_td" style="display:none;">
			<td width="30%" class="tdleft">{:L('LIST_OF_OPTIONS')}</td>
			<td>
				<textarea name="setting[options]"></textarea>
				<br/><span style="color:red;">*</span>{:L('INPUT_OPTION_VALUE')}<br/>{:L('OPTION1')}<br/>{:L('OPTION2')}<br />
			</td>
		</tr>
		<tr id='field_td'>
			<td width="30%" class="tdleft">{:L('FIELDS_NAME')}：</td>
			<td>
			<input type="text" id="field" name="field" class="span3"/><br /><span style="color:red;">*</span><span id="fieldTip"></span>
			</td>
		</tr>
		<tr id="name_td">
			<td width="30%" class="tdleft">{:L('ID_NAME')}</td>
			<td><input type="text" name="name" id="name" class="span3"/><br/><span style="color:red;">*</span><span id="nameTip"></span></td>
		</tr>
		<tr id="max_length_td">
			<td width="30%" class="tdleft">{:L('THE_LARGEST_FIELD_LENGTH')}</td>
			<td><input type="text" name="max_length" id="max_length" class="span3"/><br /><span id="max_lengthTip"></span></td>
		</tr>
		<tr id="default_value_td">
			<td width="30%" class="tdleft">{:L('DEFAULT_VALUE')}</td>
			<td><input type="text" name="default_value" id="default_value" class="span3"/><br /><span id="default_valueTip"></span></td>
		</tr>
		<tr id="is_validate_td">
			<td width="30%" class="tdleft">{:L('WHETHER_THE_VALIDATION')}</td>
			<td>
				<input class="validate" name="is_validate" onclick="validateSwitch(1)" type="radio" value="1"/> {:L('IS')} &nbsp; &nbsp; 
				<input class="validate" onclick="validateSwitch(0)" name="is_validate" checked="checked" type="radio" value="0"/> {:L('ISNOT')}
			</td>
		</tr>
		<tr id="is_unique_td" style="display:none;">
			<td width="30%" class="tdleft">{:L('WHETHER_ONLY')}</td>
			<td>
				<input name="is_unique" type="radio" value="1"/> {:L('IS')} &nbsp; &nbsp; <input name="is_unique" checked="checked" type="radio" value="0"/> {:L('ISNOT')}
			</td>
		</tr>
		<tr id="is_null_td" style="display:none;">
			<td width="30%" class="tdleft">{:L('WHETHER_ALLOW_NULL')}</td>
			<td>
				<input name="is_null" type="radio" checked="checked" value="1"/> {:L('IS')} &nbsp; &nbsp; <input name="is_null" type="radio" value="0"/> {:L('ISNOT')}
			</td>
		</tr>
		<tr id="in_index_td">
			<td width="30%" class="tdleft">{:L('LIST_PAGE_DISPLAY')}</td>
			<td>
				<input name="in_index" type="radio" value="1"/> {:L('IS')} &nbsp; &nbsp; <input name="in_index" checked="checked" type="radio" value="0"/> {:L('ISNOT')}
			</td>
		</tr>
		<tr id="in_add_td">
			<td width="30%" class="tdleft">{:L('ADD_PAGE_DISPLAY')}</td>
			<td>
				<input name="in_add" checked="checked" type="radio" value="1"/> {:L('IS')} &nbsp; &nbsp; <input name="in_add" type="radio" value="0"/> {:L('ISNOT')}
			</td>
		</tr>
		<tr id="color_td">
			<td width="30%" class="tdleft">{:L('FIELD_DISPLAY_COLOR')}</td>
			<td><input onclick="javascript:jscolor.install();" class="color" value="333333" name="color"/></td>
		</tr>
		<tr id="tips_td">
			<td width="30%" class="tdleft">{:L('INPUT_PROMPT')}</td>
			<td><input type="text" name="input_tips" class="span3"/><br/><span style="color:red;">*</span>{:L('DISPLAYED_IN_THE_FIELD_INPUT_PROMPT')}</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input class="btn btn-primary" type="submit" value="{:L('SAVE')}"/> &nbsp;
			<input class="btn" type="button" onclick="javascript:$('#dialog_field_add').dialog('close');" value="{:L('CANCEL')}"/></td>
		</tr>
	</table>
</form>
<script type="text/javascript">
    $(function(){
        jscolor.bind();
        $.formValidator.initConfig({formID:"form1",debug:false,submitOnce:true,
            onError:function(msg,obj,errorlist){
                /*
                $("#errorlist").empty();
                $.map(errorlist,function(msg){
                    $("#errorlist").append("<li>" + msg + "</li>")
                });
                */
                alert(msg);
            },
            submitAfterAjaxPrompt : '{:L('AJAX_VALIDATING_PLEASE_WAIT')}'
        });
        $("#field").formValidator({
			tipID:"fieldTip",
			empty:false,
			onShow:"{:L('CAN_ONLY_CONSIST_OF_LOWERCASE_ENGLISH')}",
			onFocus:"{:L('CAN_ONLY_CONSIST_OF_ENGLISH')}",
			onCorrect:"{:L('CORRECT_FORMAT')}"
		}).inputValidator({
			min:1,
			empty:{
				leftEmpty:false,
				rightEmpty:false,
				emptyError:"{:L('BOTH_SIDES_ARE_NOT_FREE')}"
			},
			onError:"{:L('FIELD_NAME_CANNOT_BE_EMPTY')}"
		}).regexValidator({
			regExp:"field",
			param:'i',
			dataType:"enum",
			onError:"{:L('INVALID_FORMAT')}"
		});
        $("#name").formValidator({
			tipID:"nameTip",
			empty:false,
			onShow:"{:L('FOR_EXAMPLE_THE_ARTICLE_TITLE')}",
			onFocus:"{:L('PLEASE_ENTER_A_NAME')}",
			onCorrect:"{:L('CORRECT_FORMAT')}"
		}).inputValidator({
			min:1,
			empty:{
				leftEmpty:false,
				rightEmpty:false,
				emptyError:"{:L('BOTH_SIDES_ARE_NOT_FREE')}"
			},
			onError:"{:L('LABEL_NAME_CANNOT_BE_EMPTY')}"
		});
        $("#max_length").formValidator({
			tipID:"max_lengthTip",
			empty:true,
			onEmpty:'',
			onShow:" ",
			onFocus:" ",
			onCorrect:"√"
		}).regexValidator({
			regExp:"intege1",
			param:'i',
			dataType:"enum",
			onError:"{:L('ONLY_FILL_IN_POSITIVE_INTEGER')}"
		}).inputValidator({
			max:1000,
			type:"value",
			onError:"{:L('MUST_BE_BETWEEN_1_1000')}"
		});
        
    });
	function validateSwitch(set_val){
		//1为开启验证，0为关闭验证
		if(1 == set_val){
			$('#is_unique_td').show();
			$('#is_null_td').show();
			//开启后设置默值认为不验证‘是否唯一’和‘是否允许为空’
			$("input[name=is_unique]").last().prop('checked','true');
			$("input[name=is_null]").first().prop('checked','true');
		}else{
			//如果选择不验证，则设置‘是否唯一’和‘是否允许为空’的值为不验证
			$("input[name=is_validate]").last().prop('checked','true');
			$("input[name=is_unique]").last().prop('checked','true');
			$("input[name=is_null]").first().prop('checked','true');
			$('#is_unique_td').hide();
			$('#is_null_td').hide();
		}
	}
	
	function changeContent() {
		var form_type = $("#form_type").val();
		if(form_type == 'box'){
			$("#box_data_td").show();
			$("#box_type_td").show();
			$("#max_length_td").hide();
			$("#default_value_td").hide();
            $("#default_value").unFormValidator(true);
            $("#max_length").unFormValidator(true);
		}else if(form_type == 'textarea'){
			$("#box_data_td").hide();
			$("#box_type_td").hide();
			$("#max_length_td").hide();
			$("#default_value_td").hide();
            $("#default_value").unFormValidator(true);
            $("#max_length").unFormValidator(true);
		}else if(form_type == 'datetime'){
			$("#box_data_td").hide();
			$("#box_type_td").hide();
			$("#default_value_td").hide();
			$("#max_length_td").hide();
            $("#default_value").unFormValidator(true);
            $("#max_length").unFormValidator(true);
		}else if(form_type == 'editor'){
			$("#box_data_td").hide();
			$("#box_type_td").hide();
			$("#default_value_td").hide();
			$("#max_length_td").hide();
            $("#default_value").unFormValidator(true);
            $("#max_length").unFormValidator(true);
		}else if(form_type == 'address'){
			$("#box_data_td").hide();
			$("#box_type_td").hide();
			$("#default_value_td").hide();
			$("#max_length_td").hide();
            $("#default_value").unFormValidator(true);
            $("#max_length").unFormValidator(true);
		}else if(form_type == 'number'){
            $("#box_data_td").hide();
			$("#box_type_td").hide();
			$("#max_length_td").show();
			$("#default_value_td").show();
			$("#default_value").formValidator({tipID:"default_valueTip",empty:true,onEmpty:'',onShow:" ",onFocus:" ",onCorrect:"√"}).regexValidator({regExp:"intege1",param:'i',dataType:"enum",onError:"{:L('ONLY_FILL_IN_POSITIVE_INTEGER')}"}).inputValidator({min:-2147483647,max:2147483647,type:"value",onError:"{:L('MUST_BE_BETWEEN')}"});
            $("#max_length").formValidator({tipID:"max_lengthTip",empty:true,onEmpty:'',onShow:" ",onFocus:" ",onCorrect:"√"}).regexValidator({regExp:"intege1",param:'i',dataType:"enum",onError:"{:L('ONLY_FILL_IN_POSITIVE_INTEGER')}"}).inputValidator({max:11,type:"value",onError:"{:L('MUST_BE_BETWEEN_1_11')}"});
		}else if(form_type == 'floatnumber'){
            $("#box_data_td").hide();
			$("#box_type_td").hide();
			$("#max_length_td").show();
			$("#default_value_td").show();
			$("#default_value").formValidator({tipID:"default_valueTip",empty:true,onEmpty:'',onShow:" ",onFocus:" ",onCorrect:"√"}).regexValidator({regExp:"intege1",param:'i',dataType:"enum",onError:"{:L('ONLY_FILL_OUT_A_POSITIVE_NUMBER')}"}).inputValidator({min:0.00,max:32767.99,type:"value",onError:"{:L('MUST_BE_BETWEEN')}"});
            $("#max_length").formValidator({tipID:"max_lengthTip",empty:true,onEmpty:'',onShow:" ",onFocus:" ",onCorrect:"√"}).regexValidator({regExp:"intege1",param:'i',dataType:"enum",onError:"{:L('ONLY_FILL_OUT_A_POSITIVE_NUMBER')}"}).inputValidator({max:7,type:"value",onError:"{:L('MUST_BE_BETWEEN_3_7')}"});
		}else{
			$("#box_data_td").hide();
			$("#box_type_td").hide();
			$("#max_length_td").show();
			$("#default_value_td").show();
            $("#max_length").formValidator({tipID:"max_lengthTip",empty:true,onEmpty:'',onShow:" ",onFocus:" ",onCorrect:"√"}).regexValidator({regExp:"intege1",param:'i',dataType:"enum",onError:"{:L('ONLY_FILL_IN_POSITIVE_INTEGER')}"}).inputValidator({max:1000,type:"value",onError:"{:L('MUST_BE_BETWEEN_1_1000')}"});
            $("#default_value").unFormValidator(true);
		}
		validateSwitch(0);
	}
</script>